import { Form, Input, Button, Checkbox, FormInstance } from "antd";
import Reac, {
  useRef,
  useImperativeHandle,
  forwardRef,
  RefObject,
  MutableRefObject,
} from "react";

function From(props, ref) {
  const inputRef = useRef<FormInstance<any>>(null);
  const onFinish = (values: any) => {
    console.log("Success:", values);
  };
  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };
  useImperativeHandle(ref, () => ({
    fun: () => {
      console.log("子组件的方法");
    },
    onFinish: inputRef.current?.submit,
  }));
  return (
    <div>
      <Form
        ref={inputRef}
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item
          label="Username"
          name="username"
          rules={[{ required: true, message: "Please input your username!" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="Password"
          name="password"
          rules={[{ required: true, message: "Please input your password!" }]}
        >
          <Input.Password />
        </Form.Item>
      </Form>
    </div>
  );
}
const Froms = forwardRef(From);
export default Froms;
